<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单元素：采集用户信息，并提交信息到服务器 
		采集用户信息元素 input 必须属性 type决定input呈现效果
		重点掌握type中属性值     text      文本框  【省略】
		                       password  密文文本框
							   submit    提交   结合表单元素
							   button    按钮  【html4.0写法加value="按钮名称"】
							   reset     重置   结合表单元素
							   color     颜色
							   datetime-local 本地日期时间插件
							   date      年月日插件
							   time      十分插件
							   week      周插件
							   range     滑块
							   file      文件
							   radio     单选框  结合name  checked默认选择
							   checkbox  复选框        checked默认选择
							   image     图片按钮  结合src属性使用
							   hidden    隐藏 结合JS
		-->
		<form>
		<h1>控件元素</h1>
		账号:<input type="text"><br />
		账号1:<input />
		密码:<input type="password"><br />
		<input type="submit">
		<input type="button" value="自定义按钮">
		<!-- html5.0写法 -->
		<button>点击按钮</button>
		<input type="reset" > <br />
		<input type="color" />
		<input type="datetime-local" >
		<input type="date" >
		<input type="time" >
		<input type="week" >
		<input type="range">
		<input type="file" /><br />
		男<input type="radio" name="sex" checked="checked"/>
		女<input type="radio" name="sex"/>
		<input type="checkbox" />红烧肉
		<input type="checkbox" checked/>麻辣烫 
		<input type="checkbox" />佛跳墙 
		<input type="image" src="img/2.jpg" />
		<input type="hidden" />
		<h1>下拉列表元素</h1>
		<!-- 层叠元素 快捷键：select>option -->
		发车时间：<select>
			<option >00:00--24:00</option>
			<option >00:00--06:00</option>
			<option >06:00--12:00</option>
			<option >12:00--18:00</option>
			<option >18:00--24:00</option>
		</select>
		<!-- 超大文本框元素  cols列属性  rows行属性 -->
		<h1>超大文本框元素</h1>
		建议:<textarea cols="50" rows="10"></textarea>
		<!-- 细节元素  层叠元素 快捷键：details>summary+div -->
		<h1>细节元素</h1>
		<details>
			<summary>征婚启示</summary>
			<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At aperiam voluptas quis maxime libero nam velit esse voluptates tempora tenetur sapiente rem, vel sed corporis alias hic rerum numquam porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem pariatur quisquam voluptate aliquam atque ipsa? Nulla velit facilis saepe quod reiciendis! Quae perferendis deserunt voluptate voluptatem eius! Provident, repellendus deleniti. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae ipsum ducimus reprehenderit dignissimos quibusdam ad tenetur nostrum possimus hic quasi laudantium esse itaque, obcaecati rem odit voluptate illum vitae quos. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero quaerat magnam quo ipsa numquam repellendus odit cumque sed hic quibusdam a nam, ratione beatae perspiciatis porro qui aperiam dignissimos dolores.</div>
		</details>
		</form>
		
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		周五<mark>放假啦</mark>
		<!-- 度量元素 value度量单位="默认：0min~1max"值   指定最大值跟最小值
		  min属性  max属性
		  -->
		电量：<meter value="50" min="0" max="100"></meter>
	</body>
</html>